<script setup>
import { ref, onMounted } from "vue";
import api from "./api.js";
import EditDialog from "./edit.vue";
import UserDialog from "./user.vue";
import MenuDialog from "./menu.vue";

const tableData = ref([]);
const tableRef = ref();
const editDialog = ref();
const userDialog = ref();
const menuDialog = ref();
const searchTerm = ref("");

function handleAdd() {
  editDialog.value.open();
}

function handleUpdate(row) {
  editDialog.value.open(row);
}

function handleDelete(row) {
  api.delete(row.id).then(() => {
    getList();
  });
}

function handleUser(row) {
  userDialog.value.open(row);
}

function handleMenu(row) {
  menuDialog.value.open(row);
}

function getList() {
  api.list().then((response) => {
    tableData.value = response.rows;
  }).catch((error) => {
    console.log(error);
  });
}

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="organization-structure-main" style="height: 100%; display: flex;">
    <div class="sidebar">
      <div class="hand">
        <el-button @click="handleAdd" class="role">添加角色</el-button>
        <el-button>编辑</el-button>
        <el-button @click="handleDelete(row)">删除</el-button>
      </div>

      <div class="search-container">
        <el-input v-model="searchTerm" placeholder="搜索" clearable @clear="getList" style="width: 100%;"></el-input>
      </div>
    </div>

    <div class="table-container" style="flex-grow: 1; display: flex; flex-direction: column;">
      <vxe-table style="height: 100%;" border="full" ref="tableRef" :column-config="{ resizable: true }"
        :data="tableData">
        <vxe-column field="roleName" title="角色名称"></vxe-column>
        <vxe-column field="roleKey" title="角色编码"></vxe-column>
        <vxe-column field="roleSort" title="排序"></vxe-column>
        <vxe-column width="250" title="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button size="small" link type="primary" @click="handleUpdate(row)">修改</el-button>
            <el-button size="small" link type="danger" @click="handleremove(row)">移除</el-button>
            <el-button size="small" link type="info" @click="handleUser(row)">用户</el-button>
            <el-button size="small" link type="success" @click="handleMenu(row)">菜单</el-button>
          </template>
        </vxe-column>
      </vxe-table>

      <EditDialog ref="editDialog" @sub="getList"></EditDialog>
      <UserDialog ref="userDialog" @sub="getList"></UserDialog>
      <MenuDialog ref="menuDialog" @sub="getList"></MenuDialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.organization-structure-main {
  box-sizing: border-box;
  background-color: #f9f9f9;

}

.hand {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px 5px;
}

.sidebar {
  border-right: 1px solid #eaeaea;
  padding-right: 10px;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

}

.search-container {
  margin-top: 10px;
}

.table-container {
  width: 50%;
  padding: 0px 15px;
}

.table-container .vxe-table {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-container .el-button {
  margin: 0 5px;
  
}
.role{
  width: 74px;
  height: 32px;
background-color: #005bf5;
color: #fff;
}
</style>